<template>
  <div
    class="node-wrp"
    :class="{
      visible: visible,
    }"
    @click="closeVisible"
  >
    <div
      class="node-modal"
      :class="{
        visible: visible,
      }"
      @click.stop
    >
      <div class="title-wrp">
        <span class="text">节点列表</span>
        <div class="icon-wrp" @click="reloadPage">
          <div class="bg-img reload_time"></div>
        </div>
      </div>
      <div class="node-body">
        <div
          class="node-item"
          v-for="(item, index) in 8"
          :key="index"
          @click="selectNode(index)"
        >
          <div class="item-left">
            <div class="bg-img hongkong"></div>
          </div>
          <div class="item-right">
            <div class="right-wrp">
              <div class="name">[隧道]香港01</div>
              <div
                class="speed"
                :style="{ color: '#09ff83' }"
                :class="{ loading: loadingVisible }"
              >
                {{ !loadingVisible ? "18ms" : "" }}
              </div>
            </div>
            <div class="icon-wrp">
              <div
                class="bg-img"
                :class="index == node ? 'radio_box' : 'round'"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NodeList",
  data: () => ({
    visible: false,
    node: 1,
    loadingVisible: false,
  }),
  methods: {
    closeVisible: function(){
      this.visible = false;
    },
    selectNode: function (val) {
      this.node = val;
      this.visible = false;
    },
    reloadPage: function () {
      console.log("in");
      this.loadingVisible = !this.loadingVisible;
    },
  },
};
</script>

<style scoped>
.node-wrp {
  z-index: 19;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
}
.node-wrp.visible {
  visibility: visible;
}
.node-wrp .node-modal {
  position: relative;
  top: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  transition: ease-in-out 0.5s;
  height: calc(100vh - 50px);
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.node-wrp .node-modal.visible {
  top: 50px;
}
/* title */
.title-wrp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.title-wrp {
  font-size: 30px;
  font-weight: bold;
  line-height: 40px;
}
.icon-wrp {
  height: 25px;
  width: 25px;
}
.bg-img.reload_time {
  background-image: url("../assets/imgs/reload_time.png");
}
.bg-img.hongkong {
  background-image: url("../assets/imgs/hongkong.png");
}
.bg-img.round {
  background-image: url("../assets/imgs/round.png");
}
.bg-img.radio_box {
  background-image: url("../assets/imgs/radio_box.png");
}
/* node-body */
.node-body {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.node-body::-webkit-scrollbar {
  width: 0 !important;
}
.node-body {
  -ms-overflow-style: none;
}
.node-body {
  overflow: -moz-scrollbars-none;
}
.node-item {
  display: flex;
  width: 100%;
}
.node-item .item-left {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 10px;
}
.node-item .item-right {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
}
.right-wrp .name {
  font-size: 20px;
  font-weight: bold;
}
.right-wrp .speed {
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0;
  line-height: 20px;
  height: 20px;
}
</style>